<template>
	<!-- 顶部 侧边 内容 -->
	<div class="column divheight">
		<adminhead />
		<div style="flex: 1" class="row">
			<!--左侧  -->
			<left :active="'1'"></left>
			<!-- 内容 -->
			<div style="flex: 1" class="column">
				<el-breadcrumb class="page-header" separator="/">
					<el-breadcrumb-item>首页</el-breadcrumb-item>
				</el-breadcrumb>
				<el-card style="flex: 1" class="divindexcar Navigationcolumn">
					<div style="height: 100%" class="column">
						<div style="flex: 1; gap: 20px" class="column">
							<el-descriptions border style="width: 600px" :column="3" title="商务合作">
								<el-descriptions-item label-class-name="my-label" label-align="right" label="广告联系">
									<a href="https://t.me/dexcpro" target="_blank" rel="noopener noreferrer"><el-tag size="small" type="danger">Harvey Blake</el-tag></a>
								</el-descriptions-item>
								<el-descriptions-item label-class-name="my-label" label-align="right" label="合约定制">
									<a href="https://t.me/dexcpro" target="_blank" rel="noopener noreferrer"><el-tag size="small" type="danger">Harvey Blake</el-tag></a>
								</el-descriptions-item>
								<el-descriptions-item label-class-name="my-label" label-align="right" label="dapp定制">
									<a href="https://t.me/dexcpro" target="_blank" rel="noopener noreferrer"><el-tag size="small" type="danger">Harvey Blake</el-tag></a>
								</el-descriptions-item>
							</el-descriptions>
							<el-descriptions border :column="1" title="网站信息">
								<el-descriptions-item label-align="right" label="网站域名">{{ domain }}</el-descriptions-item>
								<el-descriptions-item label-align="right" label="登陆IP">{{ IP }}</el-descriptions-item>
								<el-descriptions-item label-align="right" label="语言">{{ language }}</el-descriptions-item>
								<el-descriptions-item label-align="right" label="用户代理">{{ userAgent }}</el-descriptions-item>
								<el-descriptions-item label-align="right" label="开发者">
									<div class="row" style="gap: 10px">
										<el-tag size="small" type="danger">Harvey Blake</el-tag>
										<el-tag size="small" type="success">James</el-tag>
										<el-tag size="small" type="warning">William</el-tag>
										<el-tag size="small" type="info">Benjamin</el-tag>
									</div>
								</el-descriptions-item>
							</el-descriptions>
						</div>

						<div class="centeritems column">
							<h2>赞助商广告</h2>
							<div class="Randomtags">
								<a v-if="adlist" v-for="(item, index) in adlist.slice(0, 10)" href="http://" target="_blank" rel="noopener noreferrer"><el-image style="width: 270px; height: 135px; display: block" :src="`https://webgallery.oss-cn-beijing.aliyuncs.com/` + item.img" fit="fill" /></a>
							</div>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	import adminhead from '@/components/adminhead.vue'
	import adminleft from '@/components/adminleft.vue'
	import divright from '@/components/admin/divright.vue'
	import { dataRequest as api } from '@/api/api'
	// 下面是组件列表

	export default {
		components: {
			adminhead,
			left: adminleft,
		},
		data() {
			return {
				domain: window.location.hostname.toLowerCase().replace(/^www\./, ''),
				IP: '',
				language: navigator.language,
				userAgent: navigator.userAgent,
				adlist: null,
			}
		},
		methods: {
			async getdata() {
				try {
					let array = await api('Query', 'adslist', {})
					if (array.code == 200) {
						var timestamp = new Date().getTime()
						let data = array.data
						this.adlist = data.filter((item) => (item.timeon > timestamp || !item.timeon) && (item.EndTime < timestamp || !item.EndTime))
						while (this.adlist.length < 12) {
							this.adlist.push({ img: 'ad/ad.png' })
						}
					} else {
						console.error('Error: Unexpected response code', array.code)
					}
				} catch (error) {
					console.error('Error: Failed to fetch data', error)
				}
			},
		},
		mounted() {
			this.getdata()

			fetch('https://api.ipify.org?format=json')
				.then((response) => response.json())
				.then((data) => {
					this.IP = data.ip
				})
				.catch((error) => {
					console.error('Failed to fetch IP address:', error)
				})
		},
	}
</script>
<style>
	.divindexcar .el-card__body {
		height: 100%;
	}
</style>
<style scoped>
	:deep(.my-label) {
		background: var(--el-color-success-light-9) !important;
	}
	:deep(.my-content) {
		background: var(--el-color-danger-light-9) !important;
	}
	.page-header {
		padding: 10px;
		background-color: #fff;
	}
	.divheight {
		height: 100%;
		min-width: 1895px !important;
	}
	.Navigationcolumn {
		gap: 20px;
		margin: 15px;
	}
	.centeritems {
		gap: 20px;
		align-items: center;
	}
	.Randomtags {
		display: flex;
		gap: 25px;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.textcenter {
		display: flex;
		justify-content: center; /* 在主轴上居中 */
	}
</style>
